<template>
	<div>
		<el-row :gutter="0">
			<div class="node-box">
				<el-button type="primary" size="small" icon="el-icon-lx-add" @click="handleAdd(-1)">添加顶级节点</el-button>
			</div>
			<div class="node-box" v-for="(item,index) in nodeList" :key="index" >
				<div class="controller"><span @click="handleEdit(index,-1)">{{item.title}}</span> <span class="el-icon-lx-deletefill" @click="handleDelete(index,-1)"></span><el-button type="text" icon="el-icon-lx-add" @click="handleAdd(index)">添加节点</el-button></div>
				<div class="action-list">
					<div class="action" v-for="(action,aindex) in item.child" :key="aindex"><span @click="handleEdit(index,aindex)">{{action.title}}</span>  <span class="el-icon-lx-deletefill" @click="handleDelete(index,aindex)"></span></div>
				</div>
			</div>
		</el-row>
		<el-dialog  title="添加节点" v-model="addVisible" custom-class="dialog-page">
			<el-form :model="formData" :rules="rules" label-width="100px" ref="formAdd">
				<el-form-item label="所属节点">
					{{formData.ptitle}}
				</el-form-item>
				<el-form-item prop="name" label="节点名">
					<el-input v-model.trim="formData.name" maxlength="80" show-word-limit class="short-input" placeholder="格式: Controller/Action"></el-input>
				</el-form-item>
				<el-form-item prop="title" label="节点描述">
					<el-input v-model.trim="formData.title" maxlength="30" class="short-input"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
                <span class="dialog-footer">
                    <el-button @click="addVisible=false" size="small">取 消</el-button>
                    <el-button type="primary" @click="addSubmit" size="small">添 加</el-button>
                </span>
			</template>
		</el-dialog>
		<el-dialog  title="编辑节点" v-model="editVisible" custom-class="dialog-page">
			<el-form :model="formData" :rules="rules" label-width="100px" ref="formEdit">
				<el-form-item label="所属节点">
					{{formData.ptitle}}
				</el-form-item>
				<el-form-item prop="name" label="节点名">
					<el-input v-model.trim="formData.name" maxlength="80" show-word-limit class="short-input" placeholder="格式: Controller/Action"></el-input>
				</el-form-item>
				<el-form-item prop="title" label="节点描述">
					<el-input v-model.trim="formData.title" maxlength="30" class="short-input"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible=false" size="small">取 消</el-button>
                    <el-button type="primary" @click="saveSubmit" size="small">保 存</el-button>
                </span>
			</template>
		</el-dialog>
	</div>
</template>
<script>
import { ref, reactive, defineComponent } from "vue";
export default defineComponent({name:'nodelist'})
</script>
<script setup>
import { getNodeList, nodeAdd, nodeDelete, nodeMod} from "../../api/api";
import {ElMessage, ElMessageBox, ElLoading} from "element-plus";
import Methods from "../../utils/Methods";
	const addVisible = ref(false)
	const editVisible = ref(false)
	const formAdd = ref(null)
	const formEdit = ref(null)
	const nodeList = ref([])
	const formData = reactive({
		pindex: 0,
		index: 0,
		pid: 0,
		ptitle: '',
		name: '',
		title: ''
	})
	let loading = null
	let editId = ''
	const loadingStart = () => {
		loading = ElLoading.service({
			lock: true,
			text: 'Loading',
			spinner: 'el-icon-loading',
			background: 'rgba(0, 0, 0, 0.3)',
		})
	}
	const getData = () => {
		getNodeList({}).then(res => {
			let list = res
			let plist = []
			for(let index in list) {
				if(list[index].pid === 0) {
					plist.push(list[index])
				}
			}
			for(let index in plist) {
				let tmp = []
				for(let cindex in list) {
					if(plist[index].id === list[cindex].pid) {
						tmp.push(list[cindex])
					}
				}
				plist[index].child = tmp
			}
			nodeList.value = plist
		}).catch(err => {console.log(err)})
	}
	getData()
	const handleDelete = (pindex,index) => {
		let id = ''
		if(index === -1) {
			id = nodeList.value[pindex].id
		}else {
			id = nodeList.value[pindex].child[index].id
		}
		ElMessageBox.confirm("删除节点将不可恢复, 确定要删除吗？", "警告!", {
			type: "warning",
		}).then(() => {
			let data = {
				id: id,
				token: Methods.getLocalStorage('admin_token')
			}
			return nodeDelete(data)
		}).then(res => {
			ElMessage.success("删除成功")
			if(index === -1) {
				id = nodeList.value.splice(pindex,1)
			}else {
				id = nodeList.value[pindex].child.splice(index,1)
			}
		}).catch(err => {
			console.log(err,'----delete err')
		})
	}
	const handleAdd = (index) => {
		if(index === -1) {
			formData.pid = 0
			formData.ptitle = '顶级节点'
			formData.name = ''
		}else {
			formData.pid = nodeList.value[index].id
			formData.ptitle = nodeList.value[index].title
			formData.name = nodeList.value[index].name + '/'
		}
		formData.index = index
		formData.title = ''
		addVisible.value = true
	}
	const handleEdit = (pindex,index) => {
		if(index === -1) {
			editId = nodeList.value[pindex].id
			formData.ptitle = '顶级节点'
			formData.name = nodeList.value[pindex].name
			formData.title = nodeList.value[pindex].title
		}else {
			formData.ptitle = nodeList.value[pindex].title
			editId = nodeList.value[pindex].child[index].id
			formData.name = nodeList.value[pindex].child[index].name
			formData.title = nodeList.value[pindex].child[index].title
		}
		formData.pindex = pindex
		formData.index = index

		editVisible.value = true
	}
	const rules = {
		name: [{required: true, message: "请输入节点名", trigger: "blur",},],
		title: [{ required: true, message: "请输入节点描述", trigger:"blur" },]
	};
	const addSubmit = () => {
		formAdd.value.validate((valid) => {
			if (valid) {
				let data = {
					name: formData.name,
					title: formData.title,
					pid: formData.pid,
					token: Methods.getLocalStorage('admin_token')
				}
				loadingStart()
				nodeAdd(data).then(res => {
					ElMessage.success("添加成功")
					let id = res.id
					let node = {
						id: id,
						pid: formData.pid,
						name: formData.name,
						title: formData.title
					}
					if(formData.index === -1) {
						node.child = []
						nodeList.value.push(node)
					}else {
						nodeList.value[formData.index].child.push(node)
					}
					addVisible.value = false
					loading.close()
				}).catch(err => {
					console.log(err,'---nodeadd')
					loading.close()
				})
			} else {
				return false
			}
		})
	}
	const saveSubmit = () => {
		formEdit.value.validate((valid) => {
			if (valid) {
				let data = {
					id: editId,
					name: formData.name,
					title: formData.title,
					token: Methods.getLocalStorage('admin_token')
				}
				loadingStart()
				nodeMod(data).then(res => {
					ElMessage.success("保存成功")
					if(formData.index === -1) {
						nodeList.value[formData.pindex].name = formData.name
						nodeList.value[formData.pindex].title = formData.title
					}else {
						nodeList.value[formData.pindex].child[formData.index].name = formData.name
						nodeList.value[formData.pindex].child[formData.index].title = formData.title
					}
					editVisible.value = false
					loading.close()
				}).catch(err => {
					console.log(err,'---nodemod')
					loading.close()
				})
			} else {
				return false
			}
		})
	}
</script>

<style scoped lang="scss">
.node-box {
	width: 100%;
	padding: 15px;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.controller {
	cursor: pointer;
	display: flex;
	align-items: center;
	&:hover {
		color: #409eff;
	}
}
.action-list {
	padding: 10px 15px;
	display: flex;
	flex-wrap: wrap;
	.action {
		margin-right: 15px;
		width: 180px;
		font-size: 15px;
		cursor: pointer;
		display: flex;
		height: 30px;
		align-items: center;
		justify-content: space-between;
		&:hover {
			color: #409eff;
		}
	}
}
.el-icon-lx-deletefill {
	width: 40px;
	text-align: center;
	//color: #ff4d51;
	color: grey;
}
::v-deep(.dialog-page) {
	max-width: 1200px;
	min-width: 800px;
}
.short-input {
	width: 400px;
}
</style>
